<template>
  <el-card class="home__card-item">
    <div slot="header" class="home__card-title clearfix">
      <h3>消息通知</h3>
    </div>
    <div class="home__message">
      <ul class="home__message-list">
        <el-link :underline="false">审批协作</el-link>
        <el-button
          @click="$router.push({path: '/user/notify-message',query: { 'templateType': 3}})"
          style="float: right; padding: 3px 0"
          type="text"
          >({{ todoTotal }})
        </el-button>
        <el-divider></el-divider>
        <el-empty
          v-if="todoList.length === 0"
          description="暂无待办"
          :image-size="30"></el-empty>
          <li
          v-else
          v-for="(item, index) in todoList"
          :key="index"
          @click="goDetail(item)"
          class="dashboard__todos-item">
          <span class="dashboard__todos-item__text">
            <i class="el-icon-caret-right"></i>
            【
            <dict-tag
              :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
              :value="item.templateType" />】
                <el-link>{{ item.templateName }}</el-link>

          </span>
          <span style="float: right">{{ parseTime(item.createTime) }}</span>
        </li>
      </ul>
      <ul class="home__message-list">
        <el-link :underline="false">业务消息</el-link>
        <el-button
          @click="$router.push({path: '/user/notify-message',query: { 'templateType': 1}})"
          style="float: right; padding: 3px 0"
          type="text"
          >({{ businessMsgTotal }})
        </el-button>

        <el-divider></el-divider>
        <el-empty
          v-if="businessMsgList.length === 0"
          description="暂无消息"
          :image-size="30"></el-empty>
        <li
          v-else
          v-for="(item, index) in businessMsgList"
          :key="index"
           @click="goDetail(item)"
          class="dashboard__todos-item">
          <span class="dashboard__todos-item__text">
            <i class="el-icon-caret-right"></i>
            【
            <dict-tag
              :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
              :value="item.templateType" />】  <el-link>{{ item.templateName }}</el-link>
          </span>
          <span style="float: right">{{ parseTime(item.createTime) }}</span>
        </li>
      </ul>
      <ul class="home__message-list">
        <el-link :underline="false">系统通知</el-link>
        <el-button
          @click="$router.push('/user/system-notice')"
          style="float: right; padding: 3px 0"
          type="text"
          >({{ systemMsgtotal }})
        </el-button>

        <el-divider></el-divider>
        <el-empty
          v-if="systemMsgList.length === 0"
          description="暂无通知"
          :image-size="30"></el-empty>
        <li
          v-else
          v-for="(item, index) in systemMsgList"
          :key="index"
          class="dashboard__todos-item"
          show-overflow-tooltip="true">
          <span class="dashboard__todos-item__text">
            <i class="el-icon-caret-right"></i>
            【
            <dict-tag
              :type="DICT_TYPE.SYSTEM_NOTICE_TYPE"
              :value="item.type" />】
            {{ item.title }}
          </span>
          <span style="float: right">{{ parseTime(item.createTime) }}</span>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
import { getTodoTaskPage } from '@/api/bpm/task'
import { getMyNotifyMessagePage } from '@/api/system/notify/message'

import { listNotice } from '@/api/system/notice'
export default {
  data() {
    return {
      todoList: [],
      businessMsgList: [],
      systemMsgList: [],
      systemMsgtotal: 0,
      businessMsgTotal: 0,
      todoTotal: 0
    }
  },
  created() {
    this.getTodoList()
    this.getMessageList()
  },
  methods: {
    goDetail(row) {
      console.log(row)
      if (row.templateParams.detailUrl) {
         window.location.href  = row.templateParams.detailUrl
        // window.open(`${row.templateParams.detailUrl}`,"_blank");
      }
    },
    /** 处理审批按钮 */
    handleAudit(row) {
      this.$router.push({
        name: 'BpmProcessInstanceDetail',
        query: { id: row.processInstance.id }
      })
    },
    /** 查询列表 */
    getMessageList() {
      this.loading = true
      // 执行查询
      getMyNotifyMessagePage({
        pageNo: 1,
        pageSize: 3,
        templateType: 1
      }).then((response) => {
        this.businessMsgList = response.data.list
        this.businessMsgTotal = response.data.total
        this.loading = false
      })
      // 执行查询
      listNotice({
        pageNo: 1,
        pageSize: 3,
        status: 0
      }).then((response) => {
        this.systemMsgList = response.data.list
        this.systemMsgtotal = response.data.total
        this.loading = false
      })
    },
    /** 查询列表 */
    getTodoList() {
      // 处理查询参数
      getMyNotifyMessagePage({
        pageNo: 1,
        pageSize: 3,
        templateType: 3
      }).then((response) => {
        this.todoList = response.data.list
        this.todoTotal = response.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link{
  font-size: 12px;
}
::v-deep .el-divider {
  margin-top: 2px;
  margin-bottom: 5px;
}
::v-deep .el-empty {
  padding: 0px;
  margin-top: 10px;
}
::v-deep .el-tag {
  background-color: white;
  color: #000;
  border: #fff 0px;
  padding: 0;
}
.home__message {
  padding: 20px;
  .home__message-list {
    min-height: 106px;
    &__item {
      display: flex;
      margin-bottom: 8px;
    }
    &__left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70%;
      height: 100%;
      color: #fff;
      text-align: center;
      background-color: #3456dd;
      border-radius: 4px;
    }
    &__right {
      & > h4 {
        margin: 0 0 6px;
        color: #999;
      }
    }
  }
}
</style>
